<template>
    <div class="wechatLogin">
        <div class="iconfont icon-diannaojiaobiao" @click="handleTwo"></div>
        <h1>微信扫描登录</h1>
        <div class="mask" v-loading="OK" >
            <img :src="img" class='five'>
            <img :src="maskstyle" alt="" class="four" v-if="showQrMask" @click="updateQr" >
        </div>
        
        <p>扫描二维码</p>
    </div>
</template>
<script>
    //引入socket.io
    import socketIo from "socket.io-client"
    //引入qrcode
    import qrcode from "qrcode"
    //引入接口
    import * as api from "../../api/users"
    //引入成功和失败扫描遮罩图片
    import invalidImg from "@/assets/picture/微信图片_20220824211721.png"
    import scanSuccessImg from "@/assets/picture/scancode.png"
    //引入storage 进行储存数据
    import storage from "@/utils/storage.js"
    export default{
        data(){
            return{
                //微信二维码
                img:"",
                //是否显示遮罩
                showQrMask:false,
                //成功的遮罩图片
                // invalid:invalidImg,
                // //失败的遮罩图片
                // scanSuccess:scanSuccessImg,

                maskstyle:'',
                OK:"true"
            }
        },
        methods:{
            //封装一个方法,用于存储用户的信息和token
            storageUserInfo({ userInfo, token, permission }) {
                storage.set('userInfo', userInfo)
                storage.set('qf-token', token)
                storage.set('permission', permission)
            },
            //更新二维码地址
            updateQr(){
                let sid = storage.get('qf-sid')
                console.log(sid);
                this.getQrUrl(sid)
                this.showQrMask = false;
            },
            handleTwo(){
                this.$parent.one=true;
                this.$parent.two=false;
            },
            async getQrUrl(sid){
                let res = await api.getWeChatApi(sid)
                let {scanCodeUrl:qrcodeUrl} = res.data;

                qrcode.toDataURL(qrcodeUrl,(err,img)=>{
                    if(err){
                        throw err
                    }
                    console.log(img);
                    this.img = img
                    this.OK = false;
                })
             }
        },
        created(){
            let io = socketIo('wss://chst.vip')

            io.on('connectSuccess',async ({sid})=>{
                //将sid存到本地
                storage.set('qf-sid',sid)
                this.getQrUrl(sid)
            }),
            io.on('scancodeSuccess',async ({state,wechatCode,msg})=>{
                // console.log(data);
                this.showQrMask = true;
                this.maskstyle = scanSuccessImg;
                if(state){
                    let res = await api.wechatLoginApi(wechatCode);

                    this.storageUserInfo(res.data)

                    this.$router.push("/home")
                }else{
                    console.error(msg);
                }
            }),
            io.on('invalidCode',data=>{
                console.log(data);
                this.showQrMask = true;
                this.maskstyle =invalidImg;
            } )
        }
    }

</script>
<style lang='less' scoped>
    .wechatLogin{
        position: fixed;
        right: 50px;
        top: 200px;
        border: 1px solid white !important;
        background-color: rgba(0, 0, 0, 0.5);
        width:400px;
        height:400px;
        color:white !important;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content:space-evenly;
        /deep/ .icon-diannaojiaobiao{
            font-size: 60px;
            position: absolute;
            right: 0;
            top: 0;
        }
        .mask{
            width:200px;
            height:200px;
            position:relative;
            .five{
                width:100%;
                height:100%;
            }
            .four{
                width:100px;
                height:100px;
                position:absolute;
                left:50px;
                top:50px;
            }
        }
    }

</style>